<template>
  <div>
    <el-table :data="SaleData.data" style="width: 100%">
      <!-- <el-table-column label="学生id" prop="_id"></el-table-column> -->
      <el-table-column label="销售靓照">
        <template slot-scope="scope">
          <img
            width="50"
            v-if="scope.row.avatarImg"
            :src=" 'http://localhost:3000/images/' +scope.row.avatarImg "
            alt
          />
          <img width="50" v-else src="http://localhost:3000/images/default.jpg" alt />
        </template>
      </el-table-column>
      <el-table-column label="销售姓名" prop="username"></el-table-column>
      <el-table-column label="销售年龄" prop="age"></el-table-column>
      <el-table-column label="销售性别" prop="gender"></el-table-column>
      <el-table-column label="销售电话" prop="tell"></el-table-column>
      <el-table-column label="查看客户">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="dialogTableVisible = true">查看客户</el-button>
          <el-dialog title="客户信息" :visible.sync="dialogTableVisible">
            <el-table :data="SaleData.data.clientId">
              <el-table-column property="username" label="姓名" width="150"></el-table-column>
              <el-table-column property="age" label="年龄" width="200"></el-table-column>
              <el-table-column property="gender" label="性别"></el-table-column>
            </el-table>
          </el-dialog>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="$router.push('/home/modifyasales/' + scope.row._id)"
          >修改</el-button>
          <el-button size="mini" type="danger" @click="deleteOne(scope.row._id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination></pagination>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import pagination from "./SalePage.vue";
const {
  mapActions: SaleMapAction,
  mapState: SaleMapState,
} = createNamespacedHelpers("sales");
export default {
  components: {
    pagination,
  },
  data() {
      return {
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
      }
  },
  computed: {
    ...SaleMapState(["SaleData"]),
  },
  created() {
    this.getSalesAsync();
  },
  methods: {
    ...SaleMapAction(["getSalesAsync", "deleteOneAsync"]),
    deleteOne(_id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.deleteOneAsync(_id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
</style>